<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tier Maker</title>
  <style>
    :root {
      --color-s: #ff7f80;
      --color-a: #ffc07f;
      --color-b: #ffdf80;
      --color-c: #fdff7f;
      --color-d: #bfff7f;
      --color-e: #7fff7f;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    button {
      background: transparent;
      border: 0;
      color: #fff;
      cursor: pointer;
    }

    body {
      background: #111;
      color: #fff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      margin: 0 auto;
      max-width: 500px;
      padding-inline: 32px;
      user-select: none;
    }

    #top-header {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 32px 0 16px;

      & img {
        max-width: 125px;
        height: auto;
      }
    }

    .tier {
      border: 1px solid #444;
      display: flex;
      flex-direction: column;
      background: #1f1f1f;
    }

    .row {
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid #111;
      transition: all .3s ease;

      &.drag-over {
        background: #555;
        scale: 1.01;
      }
    }

    .label {
      cursor: pointer;
      background: var(--level, #09f);
      color: #333;
      font-weight: bold;
      width: 50px;
      height: 50px;

      display: flex;
      align-items: center;
      justify-content: center;

      & span:focus {
        outline: 1px solid #fff;
      }
    }

    #selector {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-top: 16px;
    }

    #selector-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;

      & button,
      & label {
        cursor: pointer;
        transition: all .3s ease;
        background: #222;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        padding: 4px;

        &:hover {
          background: #444;
          scale: 1.1;
        }
      }

      & svg {
        width: 100%;
        height: 100%;
      }
    }

    #selector-items {
      border: 1px solid #666;
      width: 100%;
      height: 100px;
      margin-bottom: 100px;
      display: flex;
      flex-wrap: wrap;

      &.drag-files {
        background: #555;
        border-style: dashed;
      }
    }

    .item-image {
      width: 50px;
      height: 50px;
      object-fit: cover;
      background: #fff;
      cursor: grab;

      &.drag-preview {
        opacity: .5;
        pointer-events: none;
      }
    }
  </style>

  <script type="module">
    const $ = el => document.querySelector(el)
    const $$ = el => document.querySelectorAll(el)

    const imageInput = $('#image-input')
    const itemsSection = $('#selector-items')
    const resetButton = $('#reset-tier-button')
    const saveButton = $('#save-tier-button')

    function createItem(src) {
      const imgElement = document.createElement('img')
      imgElement.draggable = true
      imgElement.src = src
      imgElement.className = 'item-image'

      imgElement.addEventListener('dragstart', handleDragStart)
      imgElement.addEventListener('dragend', handleDragEnd)

      itemsSection.appendChild(imgElement)
      return imgElement
    }

    function useFilesToCreateItems(files) {
      if (files && files.length > 0) {
        Array.from(files).forEach(file => {
          const reader = new FileReader()

          reader.onload = (eventReader) => {
            createItem(eventReader.target.result)
          }

          reader.readAsDataURL(file)
        })
      }
    }

    imageInput.addEventListener('change', (event) => {
      const { files } = event.target
      useFilesToCreateItems(files)
    })

    let draggedElement = null
    let sourceContainer = null

    const rows = $$('.tier .row')

    rows.forEach(row => {
      row.addEventListener('dragover', handleDragOver)
      row.addEventListener('drop', handleDrop)
      row.addEventListener('dragleave', handleDragLeave)
    })

    itemsSection.addEventListener('dragover', handleDragOver)
    itemsSection.addEventListener('drop', handleDrop)
    itemsSection.addEventListener('dragleave', handleDragLeave)

    itemsSection.addEventListener('drop', handleDropFromDesktop)
    itemsSection.addEventListener('dragover', handleDragOverFromDesktop)

    function handleDragOverFromDesktop(event) {
      event.preventDefault()

      const { currentTarget, dataTransfer } = event

      if (dataTransfer.types.includes('Files')) {
        currentTarget.classList.add('drag-files')
      }
    }

    function handleDropFromDesktop(event) {
      event.preventDefault()
      const { currentTarget, dataTransfer } = event

      if (dataTransfer.types.includes('Files')) {
        currentTarget.classList.remove('drag-files')
        const { files } = dataTransfer
        useFilesToCreateItems(files)
      }
    }

    function handleDrop(event) {
      event.preventDefault()

      const { currentTarget, dataTransfer } = event

      if (sourceContainer && draggedElement) {
        sourceContainer.removeChild(draggedElement)
      }

      if (draggedElement) {
        const src = dataTransfer.getData('text/plain')
        const imgElement = createItem(src)
        currentTarget.appendChild(imgElement)
      }

      currentTarget.classList.remove('drag-over')
      currentTarget.querySelector('.drag-preview')?.remove()
    }

    function handleDragOver(event) {
      event.preventDefault()

      const { currentTarget, dataTransfer } = event
      if (sourceContainer === currentTarget) return

      currentTarget.classList.add('drag-over')

      const dragPreview = document.querySelector('.drag-preview')

      if (draggedElement && !dragPreview) {
        const previewElement = draggedElement.cloneNode(true)
        previewElement.classList.add('drag-preview')
        currentTarget.appendChild(previewElement)
      }
    }

    function handleDragLeave(event) {
      event.preventDefault()

      const { currentTarget } = event
      currentTarget.classList.remove('drag-over')
      currentTarget.querySelector('.drag-preview')?.remove()
    }

    function handleDragStart(event) {
      draggedElement = event.target
      sourceContainer = draggedElement.parentNode
      event.dataTransfer.setData('text/plain', draggedElement.src)
    }

    function handleDragEnd(event) {
      draggedElement = null
      sourceContainer = null
    }

    resetButton.addEventListener('click', () => {
      const items = $$('.tier .item-image')
      items.forEach(item => {
        item.remove()
        itemsSection.appendChild(item)
      })
    })

    saveButton.addEventListener('click', () => {
      const tierContainer = $('.tier')
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')

      import('https://cdn.jsdelivr.net/npm/html2canvas-pro@1.5.8/+esm')
        .then(({ default: html2canvas }) => {
          html2canvas(tierContainer).then(canvas => {
            ctx.drawImage(canvas, 0, 0)
            const imgURL = canvas.toDataURL('image/png')

            const downloadLink = document.createElement('a')
            downloadLink.download = 'tier.png'
            downloadLink.href = imgURL
            downloadLink.click()
          })
        })
    })
  </script>
</head>

<body>
  <header id="top-header">
    <img src="https://tiermaker.com/images/tiermaker-logo.png" />
  </header>

  <section class="tier">
    <div class="row">
      <aside class="label" style="--level: var(--color-s)">
        <span contenteditable="true">S</span>
      </aside>
    </div>

    <div class="row">
      <aside class="label" style="--level: var(--color-a)">
        <span contenteditable="true">A</span>
      </aside>
    </div>

    <div class="row">
      <aside class="label" style="--level: var(--color-b)">
        <span contenteditable="true">B</span>
      </aside>
    </div>

    <div class="row">
      <aside class="label" style="--level: var(--color-c)">
        <span contenteditable="true">C</span>
      </aside>
    </div>

    <div class="row">
      <aside class="label" style="--level: var(--color-d)">
        <span contenteditable="true">D</span>
      </aside>
    </div>

    <div class="row">
      <aside class="label" style="--level: var(--color-e)">
        <span contenteditable="true">E</span>
      </aside>
    </div>
  </section>

  <footer id="selector">

    <section id="selector-buttons">
      <label>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
          <path d="M9 12h6" />
          <path d="M12 9v6" />
        </svg>
        <input multiple accept="image/*" id="image-input" type="file" hidden />
      </label>

      <button id="reset-tier-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
        </svg>
      </button>

      <button id="save-tier-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
          class="icon icon-tabler icons-tabler-outline icon-tabler-device-floppy">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
          <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
          <path d="M14 4l0 4l-6 0l0 -4" />
        </svg>
      </button>
    </section>

    <section id="selector-items">

    </section>
  </footer>
</body>

</html>